<template>
  <div class="login-box">
    <p class="close">×</p>
    <div class="content-box">
      <h3>登录后继续操作</h3>
      <div class="phone-num">
        <div class="phone-pass">邮箱</div>

        <input
          type="text"
          @blur="testname"
          placeholder="输入邮箱"
          class="username"
          v-model="user.name"
        />
      </div>
      <div class="pwd">
        <div class="phone-pass">密码</div>

        <input
          type="password"
          @blur="testpass"
          placeholder="6-16位数字和字母组合"
          class="userpwd"
          v-model="user.pass"
        />
      </div>
      <div class="agree">
        <input type="checkbox" class="input001" />
        已阅读并同意
        <a href="">《用户协议》</a>
        <a href="">《隐私政策》</a>
        <a href="">《买家须知》</a>。
      </div>
      <button @click="goH">登录</button>
      <div class="useYZM">
        <div>用验证码登录</div>
        <div @click="goReg">立即注册</div>
        <div>忘记密码</div>
      </div>
      <p class="other">其他方式登录</p>
    </div>
  </div>
</template>

<script>
import mouth from "../../public/utils/mouth";
export default {
  data() {
    return {
      testName: false,
      testPass: false,
      user: {
        name: "",
        pass: "",
      },
    };
  },
  methods: {
    goReg() {
      this.$router.push("/Reg");
    },
    testname() {
      let user = new RegExp(
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      );
      this.testName = user.test(this.user.name);
      console.log(this.testName);
    },
    testpass() {
      let pass = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/);
      this.testPass = pass.test(this.user.pass);
      console.log(this.testPass);
    },
    goH() {
      if (this.testName && this.testPass) {
        mouth
          .get("/vips", {
            // data : `name=${this.user.name}&pass=${this.user.pass}`
            params: {
              name: this.user.name,
              pass: this.user.pass,
            },
          })
          .then((res) => {
            alert("登录成功");
            window.localStorage.setItem("username",this.user.name);
            this.$router.push("/home");
            console.log("res.data", res.data);
          })
          .catch((err) => {
            console.log("出错了", err);
          });
      } else {
        alert("账号或密码输入错误");
      }
    },
  },
};
</script>

<style scoped>
.login-box {
  width: 100%;
  margin-top: 0.33rem;
}

.close {
  width: 100%;
  padding-left: 0.17rem;
  box-sizing: border-box;
  font-size: 0.3rem;
}

.content-box {
  width: 100%;
  padding: 0 0.36rem;
  box-sizing: border-box;
}

.content-box h3 {
  margin: 1.06rem 0 0.6rem 0;
  font-size: 0.22rem;
  text-align: center;
}

.phone-num,
.pwd {
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 0.28rem;
  font-size: 0.12rem;
  display: flex;
}

.phone-pass {
  width: 0.5rem;
}

.username,
.userpwd {
  border: none;
  outline: none;
  width: 2.51rem;
  padding-left: 0.27rem;
  font-size: 0.18rem;
}

input::-webkit-input-placeholder {
  color: #dedde5;
  font-size: 0.12rem;
}

.agree {
  font-size: 0.08rem;
  color: #b6b5bb;
}
.agree input {
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  margin-bottom: 0.2rem;
}

.input001[type="checkbox"] {
  cursor: pointer;
  position: relative;
  width: 0.2rem;
  height: 0.2rem;
  font-size: 0.24rem;
  visibility: hidden;
  margin-top: 0.14rem;
  margin-left: 0.05rem;
}
.input001[type="checkbox"]::after {
  position: absolute;
  top: 0;
  background-color: #fff;
  color: #fff;
  border: 1px solid #b1b1b1;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 50%;
  box-sizing: border-box;
}
.input001[type="checkbox"]:checked::after {
  background-color: #ad864d;
  border: none;
  content: "\2713";
  font-size: 0.14rem;
  font-weight: bold;
  color: black;
}

button {
  width: 100%;
  height: 0.44rem;
  background-color: #abaaba;
  color: #bdbccb;
  border: none;
}

.useYZM {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.12rem;
  margin-top: 0.13rem;
}

.other {
  width: 100%;
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.12rem;
}
</style>